// 申请审批人员分析
import React, { Fragment } from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import { toPercent } from '@/utils/utils';
import Locale from '@/utils/locale';
import styles from '@/pages/Attendance/Stat/Report/index.less';

const { locale } = new Locale('flow.manage.stat');
const toCeilNumber = value => {
    if (`${value}`.indexOf('.') !== -1) {
        return value.toFixed(1);
    }
    return value;
};

const getOption = (value, name) => {
    let color;
    if (name === '申请人') {
        color = '#1890FF';
    } else if (name === '审批人') {
        color = '#FAD337';
    } else if (name === '抄送人') {
        color = '#F2637B';
    }
    return {
        title: {
            left: `${25 - 0.5}%`,
            top: '64%',

            textAlign: 'center',
            textStyle: {
                fontSize: '12',
                color: '#687284',
                fontWeight: '400'
            }
        },
        series: {
            type: 'pie',
            radius: ['50', '65'],
            center: ['50%', '50%'],
            hoverAnimation: false,
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [
                {
                    value,
                    name,
                    itemStyle: {
                        normal: {
                            color
                        }
                    },
                    label: {
                        normal: {
                            show: false
                        }
                    }
                },
                {
                    value: 100 - value,
                    name: '占位',
                    tooltip: {
                        show: false
                    },
                    itemStyle: {
                        normal: {
                            color: '#dfdfdf'
                        }
                    },
                    label: {
                        normal: {
                            formatter: `{b|${name}}\n{a|${value}%}`,
                            textStyle: {
                                color: '#333',
                                rich: {
                                    b: {
                                        color: 'rgba(0, 0, 0, 0.45)',
                                        lineHeight: 30
                                    },
                                    a: {
                                        color: 'rgba(0, 0, 0, 0.85)',
                                        fontSize: 24
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        }
    };
};

const Person = ({ data = {} }) => {
    const {
        applyHumanCount = 0, // 申请总人数
        applyTotalCount = 0, // 申请总次数
        approvalHumanCount = 0, // 参与审批总人数
        approvalTotalCount = 0, // 参与审批总次数
        copyHumanCount = 0, // 抄送总人数
        copyTotalCount = 0, // 抄送总次数
        totalEmployeeCount = 0
    } = data;
    const empty =
        applyHumanCount === 0 &&
        applyTotalCount === 0 &&
        approvalHumanCount === 0 &&
        approvalTotalCount === 0 &&
        copyHumanCount === 0 &&
        copyTotalCount === 0 &&
        totalEmployeeCount === 0;
    return (
        <Card
            bordered={false}
            title={locale('sqspryph')}
            bodyStyle={{
                padding: empty ? 30 : 0
            }}
            style={{ position: 'relative' }}
        >
            {empty ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <Fragment>
                    <div className="descriptionText">
                        <div>
                            <span>
                                申请条数：<em>{applyTotalCount}</em>条
                            </span>
                            <span>
                                提交申请：<em>{applyHumanCount}</em>人
                            </span>
                        </div>
                        <div>
                            <span>
                                参与审批：<em>{approvalHumanCount}</em>人
                            </span>
                            <span>
                                抄送：<em>{copyHumanCount}</em>人
                            </span>
                        </div>
                    </div>
                    <ul className={styles.bottomText}>
                        <li>
                            <ReactEcharts
                                option={getOption(
                                    toPercent(
                                        applyHumanCount / totalEmployeeCount,
                                        false
                                    ),
                                    '申请人'
                                )}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>平均每人</div>
                                <div>
                                    发起{' '}
                                    {applyTotalCount === 0 &&
                                    applyHumanCount === 0
                                        ? 0
                                        : toCeilNumber(
                                            applyTotalCount / applyHumanCount
                                        )}{' '}
                                    次
                                </div>
                            </div>
                        </li>
                        <li>
                            <ReactEcharts
                                option={getOption(
                                    toPercent(
                                        approvalHumanCount / totalEmployeeCount,
                                        false
                                    ),
                                    '审批人'
                                )}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>平均每人</div>
                                <div>
                                    审批{' '}
                                    {approvalTotalCount === 0 &&
                                    approvalTotalCount === 0
                                        ? 0
                                        : toCeilNumber(
                                            approvalTotalCount /
                                                  approvalHumanCount
                                        )}{' '}
                                    次
                                </div>
                            </div>
                        </li>
                        <li>
                            <ReactEcharts
                                option={getOption(
                                    toPercent(
                                        copyHumanCount / totalEmployeeCount,
                                        false
                                    ),
                                    '抄送人'
                                )}
                                style={{ height: 170 }}
                            />
                            <div className={styles.description}>
                                <div>平均每人</div>
                                <div>
                                    被抄送{' '}
                                    {copyTotalCount === 0 &&
                                    copyHumanCount === 0
                                        ? 0
                                        : toCeilNumber(
                                            copyTotalCount / copyHumanCount
                                        )}{' '}
                                    次
                                </div>
                            </div>
                        </li>
                    </ul>
                </Fragment>
            )}
        </Card>
    );
};

export default Person;
